<template>
    <div class="layout-aside-container">
        <div class="layout-aside-logo"><Logo :collapsed="collapsed" /></div>
        <div class="layout-aside-menu">
            <a-menu 
                mode="inline" 
                :inline-collapsed="collapsed" 
                @click="useMenuClick" 
                :selected-Keys="selectedKeys"
                :open-Keys="openKeys"
            >
                <!-- 没有子级 -->
                <!-- <a-menu-item title="图书馆管理">
                    <template #icon>
                        <i class="iconfont icon-jianzhu05-L"></i>
                    </template>
                </a-menu-item> -->
                <!-- 有子级 -->
                <template v-for="menu in menuList" :key="menu.path">
                    <a-sub-menu v-if="!menu?.meta?.hidden" :key="menu.path">
                        <template #title>
                            <i class="iconfont icon-jianzhu05-L"></i>
                            <span class="aside-menu-title">{{ menu?.meta?.title }}</span>
                        </template>
                        <template v-if="menu.children && menu.children.length">
                            <template v-for="child in menu.children" :key="child.path">
                                <a-menu-item v-if="!child?.meta?.hidden" :key="child.path">
                                    <span>{{ child?.meta?.title }}</span>
                                </a-menu-item>
                            </template>
                        </template>
                    </a-sub-menu>
                </template>
            </a-menu>
        </div>
        <div class="layout-aside-footer">
            <i class="iconfont icon-tuichu" @click="handelEdit"></i>
        </div>
    </div>
</template>
<script setup>
import { computed, getCurrentInstance } from "vue"
// 组件
import Logo from "./logo.vue"
import { useCollapse, useMenu } from '@/hook';
// storage
import { exit } from "@/utils"
// api
import { logout } from "@/api/account"
const { useGetCollapse } = useCollapse()
const { menuList, selectedKeys, openKeys, useMenuClick } = useMenu()
const collapsed = computed(() => useGetCollapse())
const { proxy } = getCurrentInstance()

/**
 * 退出
 */
 const handelEdit = () => {
    proxy.$confirm({
    title: "确认退出？",
    content: "是否退出管理系统",
    okAsync: () => {
      return new Promise((resolve, reject) => { // then，catch
        logout().then(() => {
            exit()
          resolve()
        }).catch(() => {
          reject()
        })
      })
    }
  })
}
</script>